<template>
  <div class="app-container">
    <wise-crud ref="wiseCrud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
      <template slot="outHandle">
        <el-button type="primary" class="activeBtn" icon="el-icon-plus" @click.native.prevent="addHandle">添加</el-button>
      </template>
      <template v-slot:handle="slotProps">
        <el-button v-if="slotProps.row.type === 2" type="warning" size="small" class="activeBtn" round
          @click.native.prevent="editHandle(slotProps.row)">
          编辑
        </el-button>
        <el-button v-if="slotProps.row.returnStatus === 1 && slotProps.row.type === 1" type="success" size="small"
          class="activeBtn" round @click.native.prevent="returnHandle(slotProps.row)">
          归还
        </el-button>
      </template>
    </wise-crud>
    <!-- 添加物料 -->
    <el-dialog title="添加/编辑物料" :visible.sync="dialog" :close-on-click-modal="false" close-on-press-escape width="30%"
      @close="dialogCloseHandle">
      <el-form ref="ruleForm" :model="obj" :rules="rules" label-width="100px">
        <el-form-item label="物料名称" prop="name">
          <el-input v-model="obj.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数量" prop="inventoryQuantity">
          <el-input-number v-model="obj.inventoryQuantity" :min="1" :controls="false" />
        </el-form-item>
        <el-form-item label="序号" prop="coding">
          <el-input v-model="obj.coding" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="型号及规格" prop="model">
          <el-input v-model="obj.model" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="obj.brand" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <!-- <el-input v-model="obj.classification" placeholder="请输入" /> -->
          <el-select v-model="obj.classification" placeholder="请选择">
            <el-option v-for="item in materialTypeData" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="obj.remark" placeholder="请输入" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="入库人员" prop="warehousingUserId">
          <el-select v-model="obj.warehousingUserId" placeholder="请选择">
            <el-option v-for="(item, index) in employeesData" :key="index" :label="item.userInfo.username" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间" prop="warehousingTime">
          <wise-date v-model="obj.warehousingTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 物料归还 -->
    <el-dialog title="物料归还" :visible.sync="returnDialog" :close-on-click-modal="false" close-on-press-escape
      width="30%">
      <el-form ref="returnForm" :model="returnObj" :rules="returnRules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <span>{{ obj.name }}</span>
        </el-form-item>
        <el-form-item label="编码" prop="coding">
          <span>{{ obj.coding }}</span>
        </el-form-item>
        <el-form-item label="型号及规格" prop="model">
          <span>{{ obj.model }}</span>
        </el-form-item>
        <el-form-item label="品牌" prop="coding">
          <span>{{ obj.brand }}</span>
        </el-form-item>
        <el-form-item label="分类" prop="model">
          <span>{{ obj.dictionaryInfo?obj.dictionaryInfo.name:"" }}</span>
        </el-form-item>
        <el-form-item label="归还数量" prop="returnQuantity">
          <el-input-number v-model="returnObj.returnQuantity" :min="1" :controls="false" :max="obj.inventoryQuantity" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="returnDialog = false">取 消</el-button>
        <el-button type="primary" @click="returnSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import WiseDate from '@/components/Crud/components/wiseDate'
  import {
    postHandle
  } from '@/api'
  import {
    dateFormat
  } from '../../../../filters'
  export default {
    name: 'WarehouseManage',
    components: {
      WiseCrud,
      WiseDate
    },
    data() {
      return {
        handle: [],
        urls: {
          list: '/api/v1/welder-sbtx-second/warehouse-comb/list',
          show: '/api/v1/welder-sbtx-second/warehouse-comb/show/',
          add: '/api/v1/welder-sbtx-second/warehouse-comb/create',
          delete: '/api/v1/welder-sbtx-second/warehouse-comb/remove/',
          update: '/api/v1/welder-sbtx-second/warehouse/update/'
        },
        fields: [{
            label: '物料名称',
            prop: 'name',
            type: 'text',
            use: ['table', 'view']
          },
          {
            label: '数量',
            prop: 'inventoryQuantity',
            type: 'text',
            use: ['table', 'view']
          },
          {
            label: '序号',
            prop: 'coding',
            type: 'text',
            use: ['table', 'view']
          },
          {
            label: '型号及规格',
            prop: 'model',
            type: 'text',
            use: ['table', 'view']
          },
          {
            label: '品牌',
            prop: 'brand',
            type: 'text',
            use: ['table', 'view']
          },
          // {
          //   label: '分类',
          //   prop: 'classification',
          //   type: 'text',
          //   use: ['table', 'view']
          // },
          {
            label: '分类',
            prop: 'dictionaryInfo',
            type: 'render',
            viewRender: (h, item, object) => {
              return h('div', object.dictionaryInfo ? object.dictionaryInfo.name : '')
            },
            tableRender: (h, row, index) => {
              return h('div', row.dictionaryInfo ? row.dictionaryInfo.name : '')
            },
            use: ['table', 'view']
          },
          // {
          //   label: '分类',
          //   prop: 'classificationInfo',
          //   type: 'select',
          //   url: '/api/v1/welder-sbtx-second/dictionary',
          //   labelKey: 'name',
          //   valueKey: 'code',
          //   labelWidth: '130px',
          //   objKeys: [
          //     {
          //       field: 'classification',
          //       key: 'code'
          //     }
          //   ],
          //   filters: [
          //     {
          //       field: 'st',
          //       operator: 'NE',
          //       value: 9
          //     },
          //     {
          //       field: 'pdCode',
          //       operator: 'EQUALS',
          //       value: 'materialType'
          //     }
          //   ],
          //   rules: [
          //     {
          //       required: true,
          //       message: '必填项不能为空',
          //       trigger: 'change'
          //     }
          //   ],
          //   use: ['edit', 'add']
          // },
          {
            label: '备注',
            prop: 'remark',
            type: 'text',
            use: ['view']
          },
          // {
          //   label: '记录人',
          //   type: 'render',
          //   use: ['table', 'view'],
          //   tableRender: (h, row, index) => {
          //     return h('div', this.recorderHandle(row))
          //   },
          //   viewRender: (h, item, object) => {
          //     return h('div', this.recorderHandle(object))
          //   }
          // },
          {
            label: '添加区分',
            type: 'render',
            use: ['table', 'view'],
            tableRender: (h, row, index) => {
              return h('div', row.type === 1 ? '企业添加' : '自行购买')
            },
            viewRender: (h, item, object) => {
              return h('div', object.type === 1 ? '企业添加' : '自行购买')
            }
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: ['view', 'delete'],
            tableWidth: 200
          }
        ],
        obj: {
          name: null,
          coding: null,
          model: null,
          inventoryQuantity: null,
          classification: null,
          brand: null,
          remark: null
        },
        rules: {
          name: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          inventoryQuantity: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          coding: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          model: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          brand: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          classification: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }
          // warehousingUserId: { required: true, message: '必填项不能为空', trigger: 'blur' },
          // warehousingTime: { required: true, message: '必填项不能为空', trigger: 'blur' }
        },
        returnRules: {
          returnQuantity: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }]
        },
        dialog: false,
        materialData: [],
        employeesData: [],
        returnObj: {
          returnQuantity: null
        },
        returnDialog: false,
        materialTypeData: []
      }
    },
    computed: {
      filters() {
        return [{
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.spaceId
        }]
      },
      spaceId() {
        return this.$store.getters.spaceId
      }
    },
    created() {
      this.getEmployees()
      this.getTypeData()
    },
    methods: {
      getEmployees() {
        let params = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          },
        }
        postHandle('/api/v1/welder-uac-second/space-user-member-comb/get-list', params).then(res => {
          this.employeesData = res.result
        })
      },
      addHandle() {
        this.obj = {
          name: null,
          coding: null,
          model: null,
          inventoryQuantity: null,
          classification: null,
          brand: null,
          remark: null
        }
        this.dialog = true
      },
      editHandle(row) {
        this.getObjectId(row)
        this.dialog = true
      },
      returnHandle(row) {
        this.obj = JSON.parse(JSON.stringify(row))
        this.returnObj.returnQuantity = 1
        this.returnDialog = true
      },
      getObjectId({
        id
      }) {
        postHandle(this.urls.show + id).then(res => {
          this.obj = res.result
        })
      },
      submitHandle() {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            let url = null
            let params = {
              ...this.obj,
              type: 2,
              spaceId: this.spaceId
            }
            if (this.obj.id) {
              url = this.urls.update + this.obj.id
            } else {
              url = this.urls.add
            }
            postHandle(url, {
              obj: params
            }).then(res => {
              this.$message.success('成功')
              this.$refs['wiseCrud'].handleSearch(0)
              this.dialog = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      returnSubmit() {
        this.$refs['returnForm'].validate(valid => {
          if (valid) {
            postHandle('/api/v1/welder-sbtx-second/warehouse-comb/return/' + this.obj.id, {
              obj: this.returnObj
            }).then(res => {
              this.$message.success('成功')
              this.$refs['wiseCrud'].handleSearch(0)
              this.returnDialog = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      recorderHandle(obj) {
        if (obj.type === 1) {
          return obj.warehouseOutUserInfo ? obj.warehouseOutUserInfo.username : ''
        } else {
          return obj.warehousingUserInfo ? obj.warehousingUserInfo.username : ''
        }
      },
      dialogCloseHandle() {
        this.$refs['ruleForm'].resetFields()
      },
      getTypeData() {
        let params = {
          d: {
            filters: [{
                field: 'st',
                operator: 'NE',
                value: 9
              },
              {
                field: 'pdCode',
                operator: 'EQUALS',
                value: 'materialType'
              }
            ],
            page: {
              ps: 99999
            }
          }
        }
        postHandle('/api/v1/welder-sbtx-second/dictionary', params).then(res => {
          this.materialTypeData = res.result
        })
      }
    }
  }
</script>

<style lang="less" scoped></style>